<template>
  <div style="margin-bottom: 10px">
    <el-card>
      <el-form :model="query" ref="serchFormRef" :inline="true">
        <el-row>
          <el-col :span="18">
            <el-form-item label="关键字" label-width="80px">
              <el-input v-model="query.keyword" placeholder="请根据文章标题搜索" size="small"></el-input>
            </el-form-item>
            <el-form-item label="状态" label-width="80px">
              <el-select v-model="query.state" placeholder="请选择状态" clearable size="small">
                <el-option v-for="item in options" :key="item.index" :label="item.label" :value="item.state">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="clearSearch">清除</el-button>
              <el-button size="small" type="primary" @click="getArticles">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="addBtn">
            <el-button size="small" type="success" icon="el-icon-edit" @click="showAddDialog">新增技巧
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-alert :title="dataNumber" type="info" show-icon style="margin-bottom:10px" :closable="false"> </el-alert>
      <el-table :data="items">
        <el-table-column label="序号" type="index" width="50px" align="center"></el-table-column>
        <el-table-column label="文章标题" prop="title">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
            <el-button type="text" icon="el-icon-film" v-if="scope.row.videoURL !== null && scope.row.videoURL !==''"
              @click="showVideo(scope.row.videoURL)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="阅读数" prop="visits" align="center"></el-table-column>
        <el-table-column label="录入人" prop="username" align="center"></el-table-column>
        <el-table-column label="录入时间" prop="createTime">
          <template slot-scope="scope">
            {{scope.row.createTime | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.state === 1">已启用</el-tag>
            <el-tag type="danger" v-else>已禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button type="text" @click="showPreview(scope.row.id)">预览</el-button>
            <el-button type="text" v-if="scope.row.state === 1" @click="turnBtn(scope.row.state, scope.row.id)">禁用
            </el-button>
            <el-button type="text" v-else @click="turnBtn(scope.row.state, scope.row.id)">启用</el-button>
            <el-button type="text" v-if="scope.row.state === 1" disabled>修改</el-button>
            <el-button type="text" v-else @click="showEditDialog(scope.row.id)">修改</el-button>
            <el-button type="text" v-if="scope.row.state === 1" disabled>删除</el-button>
            <el-button type="text" v-else @click="deleteTags(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="query.page - 0" :page-sizes="[3, 5, 10, 20]" :page-size="query.pagesize - 0"
        layout="prev, pager, next,sizes, jumper" :total="counts - 0">
      </el-pagination>
    </el-card>
    <!-- 添加按钮对话框 -->
    <el-dialog title="添加文章" :visible.sync="addDialogFormVisible" width="800px" @close=resetEditForm>
      <el-form :model="addarticlesForm" ref="addarticlesFormRef" :rules="addFormRules">
        <el-form-item label="文章标题" prop="title" label-width="90px">
          <el-input v-model="addarticlesForm.title" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" label-width="90px" prop="articleBody">
          <!-- 富文本编辑器 -->
          <quill-editor v-model="addarticlesForm.articleBody" :options="editorOption" ref="myTextEditor"
            @blur="changeQuillEditor('articleBody')"></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" label-width="90px" style="margin-top: 80px;">
          <el-input v-model="addarticlesForm.videoURL" placeholder="请输入视频地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addArticles">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改按钮对话框 -->
    <el-dialog title="修改文章" :visible.sync="editDialogFormVisible" width="800px" @close=dialogResetForm>
      <el-form :model="editForm" ref="editFormRef" :rules="addFormRules">
        <el-form-item label="文章标题" prop="title" label-width="90px">
          <el-input v-model="editForm.title" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" label-width="90px" prop="articleBody">
          <!-- 富文本编辑器 -->
          <quill-editor v-model="editForm.articleBody" :options="editorOption" ref="myTextEditor"
            @blur="editQuillEditor('articleBody')">
          </quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" label-width="90px" style="margin-top: 80px;">
          <el-input v-model="editForm.videoURL" placeholder="请输入视频地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editArticles">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 预览文章对话框 -->
    <el-dialog title="预览文章" :visible.sync="pwDialogVisible" width="800px" class="pwDialog">
      <h2>{{ details.title }}</h2>
      <p>
        {{ details.createTime | parseTimeByString }} {{ details.creatorID === 2 ? '超级管理员' : '录入管理员' }} <i
          class="el-icon-view">
          {{ details.visits }}</i>
      </p>
      <div class="preview-content" v-html="details.articleBody"></div>
    </el-dialog>

    <!-- 视频插件 -->
    <div class="jxkvideo" v-if="videoDialog">
      <div class="jxkbox" v-if="videoDialog">
        <div class="jxkclose" @click=stopfn v-if="videoDialog">×</div>
        <video :src="videourll" autoplay controls v-if="videoDialog"></video>
      </div>
    </div>

  </div>
</template>

<script>
import { list, add, update, remove, changeState, detail } from '@/api/hmmm/articles.js'

export default {
  components: {

  },
  name: 'articles',
  data () {
    return {
      // 富文本配置
      editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            // [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['blockquote', 'code-block'], // 引用，代码块
            // [{ script: 'sub' }, { script: 'super' }], // 上下标
            // [{ indent: '-1' }, { indent: '+1' }], // 缩进
            // [{ direction: 'rtl' }], // 文本方向
            // [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            // [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            // [{ font: [] }], // 字体
            // [{ align: [] }], // 对齐方式
            // ['clean'], // 清除字体样式
            ['image', 'link'] // 上传图片、上传视频
          ]
        }
      },
      // quillOption: quillConfig,
      query: {
        page: 1,
        pages: 0,
        pagesize: 5,
        keyword: null
      },
      counts: '',
      items: [],
      options: [
        { state: 1, label: '已启用' },
        { state: 0, label: '已禁用' },
        { state: null, label: '全部' }
      ],
      addDialogFormVisible: false,
      editDialogFormVisible: false,
      addarticlesForm: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      editArticlesForm: {},
      // 添加表单验证规则
      addFormRules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入200字以内的内容', trigger: 'blur' },
          { min: 1, max: 200, message: '不得超过200字' }
        ]
      },
      editForm: {},
      details: {},
      videoDialog: false,
      pwDialogVisible: false,
      videourll: ''

    }
  },
  // mounted () {
  //   this.$refs.myTextEditor.quill.enable(false)
  // },
  created () {
    this.getArticles()
  },
  methods: {
    async getArticles () {
      const { data: res } = await list(this.query)
      this.items = res.items
      this.counts = res.counts
      // console.log(res)
      // console.log(this.items)
    },
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getArticles()
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.getArticles()
    },
    clearSearch () {
      this.query.keyword = ''
      this.$refs.serchFormRef.resetFields()
      this.getArticles()
    },
    // 显示添加文章对话框
    showAddDialog () {
      this.addDialogFormVisible = true
    },
    addArticles () {
      this.$refs.addarticlesFormRef.validate(async valid => {
        if (!valid) return
        await add(this.addarticlesForm)
        // if (res.success !== true) return this.$message.error('添加标签失败！')
        // console.log(res)
        this.$message.success('添加文章成功！')
        this.addDialogFormVisible = false
        this.getArticles()
        this.$refs.addarticlesFormRef.resetFields()
      })
    },
    // 修改文章状态
    async turnBtn (state, id) {
      var newState = state === 0 ? 1 : 0
      const { data: res } = await changeState({ id: id, state: newState })
      if (res.success !== true) return this.$message.error('变更状态失败！')
      this.$message.success('变更状态成功！')
      this.getArticles()
    },
    // 显示修改文章对话框
    async showEditDialog (id) {
      this.editDialogFormVisible = true
      const res = await detail({ id })
      this.editForm = res.data
      // console.log(this.editForm)
    },
    // 确定修改
    editArticles () {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return
        const id = this.editForm.id
        const title = this.editForm.title
        const articleBody = this.editForm.articleBody
        const videoURL = this.editForm.videoURL
        const { data: res } = await update({ id: id, title, articleBody, videoURL })
        if (res.success !== true) return this.$message.error('修改文章失败！')
        // console.log(res)
        this.$message.success('修改文章成功！')
        this.$refs.editFormRef.resetFields()
        this.editDialogFormVisible = false
        this.getArticles()
      })
    },
    // 删除
    deleteTags (id) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await remove({ id })
        if (res.success !== true) return this.$message.error('删除失败！')
        this.$message.success('删除成功！')
        this.getArticles()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 显示视频详情
    showVideo (url) {
      this.videoDialog = true
      this.videourll = url
    },

    // 显示预览文章
    async showPreview (id) {
      this.pwDialogVisible = true
      const res = await detail({ id })
      this.details = res.data
    },
    stopfn () {
      this.videoDialog = false
    },
    changeQuillEditor (name) {
      // console.log(this.$refs.myTextEditor)
      this.$refs.addarticlesFormRef.validateField(name)
    },
    editQuillEditor (name) {
      this.$refs.editFormRef.validateField(name)
    },
    // 重置
    resetEditForm () {
      this.$refs.addarticlesFormRef.resetFields()
    },
    dialogResetForm () {
      this.$refs.editFormRef.resetFields()
    }
  },
  computed: {
    dataNumber () {
      return '数据一共' + this.counts + '条'
    }
    // player () {
    //   return this.$refs.videoPlayer.player
    // }
  }
}
</script>

<style scoped lang="less">
.jxkvideo {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
}
.jxkclose {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translate(-50%);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 5px rgb(0 0 0 / 40%);
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 34px;
  font-weight: 400;
  cursor: pointer;
}
.jxkbox {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%);
  width: 700px;
  height: 100%;
}
video {
  position: absolute;
  top: 400px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 400px;
}
.preview-content {
  background-color: #f5f5f5;
  border-top: 1px dashed rgb(204, 204, 204);
  padding: 20px 0;
}
.el-pagination {
  margin: 15px 0;
  float: right;
}
.pwDialog {
  /deep/ .el-dialog__body {
    padding: 10px 20px 30px;
  }
}
.el-card {
  margin: 10px;
}
.addBtn {
  text-align: right;
}
.quill-editor {
  height: 200px;
  text-align: left;
}

.box {
  position: fixed;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 600px;
  // overflow: hidden;
  text-align: center;
  // background-color:rgba(106, 107, 107, 0.5);
}
#my-player {
  width: 100% !important;
  height: 500px !important;
  margin-top: 60px;
  margin-left: 100px;
  z-index: 999;
}
.close {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 30px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  background: rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 0 5px rgb(0 0 0 / 40%);
  box-shadow: 0 0 5px rgb(0 0 0 / 40%);
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
}
.main {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
}
/deep/ .vjs-paused.vjs-has-started .vjs-big-play-button {
  display: none !important;
  // position: absolute;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);
}
//全屏按钮
video::-webkit-media-controls-fullscreen-button {
  display: none;
}
//播放按钮
video::-webkit-media-controls-play-button {
  display: block;
}
//进度条
video::-webkit-media-controls-timeline {
  display: block;
}
//观看的当前时间
video::-webkit-media-controls-current-time-display {
  display: none;
}
//剩余时间
video::-webkit-media-controls-time-remaining-display {
  display: none;
}
//音量按钮
video::-webkit-media-controls-mute-button {
  display: block;
}
video::-webkit-media-controls-toggle-closed-captions-button {
  display: block;
}
//音量的控制条
video::-webkit-media-controls-volume-slider {
  display: block !important;
}
</style>
